import React, { useEffect } from 'react'
import { Button, Form, Input, Card , message} from 'antd';
import style from '../index.module.css'
import { useNavigate, useParams } from 'react-router-dom';

import {
  addHospitalRequest,         //添加医院请求
  getHosSetFromIdRequest,     //根据id获取医院请求
  updateHosSetFromIDrequest,  //修改医院请求
} from "@api/hospital/hospitalSet"   

import type { addHospitalParamType } from "@api/hospital/model/hospitalSetTypes"  //引入新增医院请求的参数的类型


export default function AddOrUpdateHosSet() {
  //使用编程式导点击跳转路由
  const navigate = useNavigate()
  //通过Form组件上的一个useForm方法,可以创建实例,然后在某一个Form组件上添加一个form属性,值为当前实例,那么Form表单和当前的form实例就关联起来了
  const [form] = Form.useForm();
  //使用useParams Hook拿到修改医院函数传递过来的id值
  const {id} = useParams();


  //如果是修改医院,那么在初始化的时候就先发送请求获取数据添加到表单中
  useEffect(() => {
    if(id){
      const getHosListData = async () => {
        //发送请求
        const result = await getHosSetFromIdRequest(id)
        // console.log(result);

        //Form实例上有一个setFieldsValue方法,可以把一个对象的值通过key和表单的name一一对应的形式添加到表单里
        form.setFieldsValue(result)

      }
      getHosListData()
    }
  } , [])
  

  //1.点击保存的事件回调函数
  const addHospitalHandle = async (fieldValue: addHospitalParamType) => {
    //点击保存的时候根据有没有id判断是添加还是修改
    if(id){
      //发送修改请求 不需要返回值
      await updateHosSetFromIDrequest({...fieldValue , id })
      
      //弹出修改成功提示
      message.success("修改成功!")
      
    }else{
      //发送添加请求 不需要返回值
      await addHospitalRequest(fieldValue);

      //弹出添加成功提示
      message.success("添加成功!")
    }

    //请求成功以后要返回医院设置页面
    navigate("/syt/hospatil/hospatilSet")
  }

  //2.点击返回的事件回调函数
  const goBackHosHandle = () => {
    //点击以后历史回退
    navigate(-1);
  }

  
  return (
    <Card>
      <Form
        form= {form}
        name="basic"
        labelCol={{ span: 2 }}     //表单的label的宽度
        wrapperCol={{ span: 20 }}  //表单的input的宽度
        onFinish={addHospitalHandle}  //点击提交的函数
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ 
            required: true, 
            message: '请输入api基础路径',
            transform(value) {
              return value.trim()  //将字段值转换成目标值后进行校验
            }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ 
            required: true, 
            message: '请输入医院编号',
            transform(value) {
              return value.trim()  //将字段值转换成目标值后进行校验
            }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ 
            required: true, 
            message: '请输入api基础路径',
            transform(value) {
              return value.trim()  //将字段值转换成目标值后进行校验
            }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{ 
            required: true, 
            message: '请输入联系人姓名',
            transform(value) {
              return value.trim()  //将字段值转换成目标值后进行校验
            }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[{ 
            required: true, 
            message: '请输入联系人手机',
            transform(value) {
              return value.trim()  //将字段值转换成目标值后进行校验
            }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          wrapperCol={{ offset: 2 }}
        >
          <Button type="primary" htmlType="submit" className={style.mr}>
            提交
          </Button>
          {/* 点击返回的函数 */}
          <Button type="default" htmlType="button" onClick={goBackHosHandle}>  
            返回
          </Button>
        </Form.Item>

      </Form>
    </Card>
  );
}

